<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <!--当前示例页面样式表引用-->
    <link rel="stylesheet" href="./static/demo/openlayers/example/style.css" />
    <script include="jquery" src="./static/libs/include-lib-local.js"></script>
    <script src="./static/libs/include-openlayers-local.js"></script>
    <style type="text/css">
        #mapCon {
            width: 100%;
            height: 95%;
            position: absolute;
        }
      

        #layertree li > span {
            cursor: pointer;
            font-size: 6px;
        }
        #layertree ul{
            font-family: cursive;
            color:white;
            margin: 0px;
            padding-left: 20px;
        }
        fieldset{
            padding-left: 6px;
            padding-bottom: 5px;
            padding-right: 6px;
            border-width: 1px;
        }
      
        br{
           display:inline; 
           line-height:2px;
        }

        fieldset label {
            float:left;
            color: white;
            font-size: 6px;
            font-weight: 500;
            font-family: cursive;
            margin: 2px 2px;
            width: 70%;
        }
        fieldset input {
            float: left;
            margin-bottom:2px;
            width: 10%;
        }
        input[type="range"] {
        /*-webkit-box-shadow: 0 1px 0 0px #424242, 0 1px 0 #060607 inset, 0px 2px 10px 0px black inset, 1px 0px 2px rgba(0, 0, 0, 0.4) inset, 0 0px 1px rgba(0, 0, 0, 0.6) inset;*/
            -webkit-appearance:none; /*去除默认样式*/
            background-color: #ebeff4;
            /*border-radius: 15px;*/
            width: 70px;
            -webkit-appearance: none;
            height:2px;
            padding: 0;
            border: none;
            margin-top: 10px
        }
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;/*去除默认样式*/
            cursor: default;
            top: 0;
            height: 10px;
            width: 10px;
            transform: translateY(0px);
            /*background: none repeat scroll 0 0 #5891f5;*/
            background: #fff;
            border-radius: 5px;
            border: 2px solid #006eb3;
            /*-webkit-box-shadow: 0 -1px 1px #fc7701 inset;*/
        }
    </style>

    <script type="text/javascript">
        var map = null;
        var tdk = "4c27d6e0e8a90715b23a989d42272fd8";   //天地图密钥

        var styles = {
            //设置square样式
            'square': new ol.style.Style({
                image: new ol.style.RegularShape({
                    fill: new ol.style.Fill({ color: 'blue' }),
                    points: 4,
                    radius: 80,
                    angle: Math.PI / 4
                })
            }),
            //设置triangle样式
            'triangle': new ol.style.Style({
                image: new ol.style.RegularShape({
                    fill: new ol.style.Fill({ color: 'red' }),
                    points: 3,
                    radius: 80,
                    rotation: Math.PI / 4,
                    angle: 0,
                    rotateWithView: true
                })
            }),
            //设置star样式
            'star': new ol.style.Style({
                image: new ol.style.RegularShape({
                    fill: new ol.style.Fill({ color: 'green' }),
                    points: 5,
                    radius: 80,
                    radius2: 40,
                    angle: 0
                })
            })
        };
        function createLayer(coordinates, style, zIndex) {
            var feature = new ol.Feature(new ol.geom.Point(coordinates));
            feature.setStyle(style);

            var source = new ol.source.Vector({
                features: [feature]
            });

            var vectorLayer = new ol.layer.Vector({
                source: source
            });
            vectorLayer.setZIndex(zIndex);

            return vectorLayer;
        }


        function init() {
            //加载天地图瓦片图层数据
            var TiandiMap_vect = new ol.layer.Tile({
                    title: "天地图矢量图层",
                    source: new ol.source.XYZ({
                        url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=" + tdk,
                        wrapX: false
                    })
            });
            
            var TiandiMap_vectcia =new ol.layer.Tile({
                    title: "天地图矢量注记图层",
                    source: new ol.source.XYZ({
                        url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=" + tdk
                    })
            });

        //创建图层
            var layer0 = createLayer([40, 40], styles['star'], 0);
            var layer1 = createLayer([0, 0], styles['square'], 1);
            var layer2 = createLayer([0, 40], styles['triangle'], 0);

            //初始化地图容器
            map = new ol.Map({
                target: 'mapCon',     //地图容器div的ID
                controls: ol.control.defaults({
                    attributionOptions: ({
                        collapsible: true
                    })
                }),
                view: new ol.View({
                    center: ol.proj.fromLonLat([0, 0]),  //地图初始中心点
                    maxZoom: 28,         //最大瓦片显示级数
                    minZoom: 1,          //最小瓦片显示级数
                    zoom: 4              //地图初始显示级数
                
                }),
                layers:[TiandiMap_vect,TiandiMap_vectcia,new ol.layer.Group({layers:[layer0,layer1,layer2]})]
            });

            map.getLayers().forEach(function (layer, i) {
                if (layer instanceof ol.layer.Group) {
                    layer.getLayers().forEach(function (sublayer, j) {
                        bindInputs('#layer' + i + j, sublayer);
                    });
                }
            });

            $('#layertree li > span').click(function() {
                $(this).siblings('fieldset').toggle();
            });
            $('#layertree li > span').siblings('fieldset').hide();
        
        }
        function bindInputs(layerid, layer) {
            var ZindexInput = $(layerid + ' input.ZIndex');
            ZindexInput.on('input change', function () {
                layer.setZIndex(parseInt(this.value)|| 0);
            });
            var layerZindex = layer.getZIndex();
            ZindexInput.val(String(layer.getZIndex()||0));
        }
   
    </script>
</head>

<body onload="init()">
    <div id="mapCon">
    </div>
    <fieldset id="layertree" style="position: absolute;width: 180px;top: 18px;left: 50px;background-color: black;opacity: 0.65;border-radius: 10px;padding: 10px 6px;">
        <ul>
            <li>
                <span>天地图矢量</span>
            </li>
            <li>
                <span>天地图注记图层</span>
            </li>
            <li>
                <span>组图层</span>
                <ul>
                    <li>
                        <span>矢量图层-星</span>
                        <fieldset id="layer20">
                            <label style="width: 50px;line-height: 17px">Z-Index:</label><input style="width: 64px;" class="ZIndex" type="range" min="0" max="5" step="1" />
                        </fieldset>
                    </li>
                    <li>
                        <span>矢量图层-正方形</span>
                        <fieldset id="layer21">
                            <label style="width: 50px;line-height: 17px">Z-Index:</label><input style="width: 64px;" class="ZIndex" type="range" min="0" max="5" step="1" />
                        </fieldset>
                    </li>
                    <li>
                        <span>矢量图层-三角形</span>
                        <fieldset id="layer22">
                            <label style="width: 50px;line-height: 17px">Z-Index:</label><input style="width: 64px;" class="ZIndex" type="range" min="0" max="5" step="1" />
                        </fieldset>
                    </li>
                </ul>
            </li>
        </ul>
    </fieldset>
</body>

</html>